<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加施工阶段计划</title>
    <link href="../img/icon.ico" rel="shortcut icon"/>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="content_box">
            <div class="cell_box" style="width: 39.25vw;">
                <div class="cell_title">
                    <div class="cell_name">基本信息:</div>
                    <div class="cell_but"></div>
                </div>
                <div class="cell_cont" style="height: 200px;">
                    <div class="form_box">
                        <div class="form_name must_input">计划标题</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!basicInof.title"
                                :content="basicInof.title" placement="top">
                                <el-input class="public_input" placeholder="请输入内容" v-model="basicInof.title" clearable>
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">预计开工完工日期</div>
                        <div class="form_cont">
                            <div class="public_input">
                                <el-date-picker v-model="basicInof.times" type="daterange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开工日期"
                                    end-placeholder="完工日期">
                                </el-date-picker>
                            </div>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">所在工程节点</div>
                        <div class="form_cont">
                            <el-select class="public_input" v-model="basicInof.workNodeId" placeholder="请选择工程节点">
                                <el-option v-for="item in gcNodeList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="width: 43.84vw;margin-left: 2.41vw;">
                <div class="cell_title">
                    <div class="cell_name">附件:</div>
                    <div class="cell_but">
                        <el-upload class="upload-demo" action="##" :show-file-list="false" :http-request="httprequest"
                            multiple>
                            <el-button class="border_but" type="primary">上传附件</el-button>
                        </el-upload>
                    </div>
                </div>
                <div class="cell_cont" style="height: 200px;">
                    <div class="table_box border_table_box" style="height: 100%;">
                        <el-table :data="fileList" height="100%" border style="width: 100%">

                            <el-table-column prop="filename" align="center" show-overflow-tooltip label="名称">
                            </el-table-column>

                            <el-table-column prop="userName" align="center" show-overflow-tooltip label="上传人"
                                width="70">
                            </el-table-column>

                            <el-table-column prop="uploadTime" align="center" show-overflow-tooltip label="上传时间"
                                width="160">
                            </el-table-column>

                            <el-table-column align="center" show-overflow-tooltip label="操作" width="140">
                                <template slot-scope="scope">
                                    <el-button @click="prevewImg(scope.row.filename, scope.row.fileurl)" type="text">查看
                                    </el-button>
                                    <el-button @click="downImg(scope.row.filename, scope.row.fileurl)" type="text">下载
                                    </el-button>
                                    <el-button @click="removeImg(fileList, scope.$index)" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="width: 100%;margin-top: 2.06vh;">
                <div class="cell_title">
                    <div class="cell_name">计划工序进度及主体楼层:</div>
                    <div class="cell_but">
                        <el-button @click="addAllgx" class="border_but" type="primary">新增</el-button>
                    </div>
                </div>
                <div class="cell_cont" style="min-height: 238px;overflow: auto;max-height: 400px;">
                    <div class="list_box">
                        <!-- 计划工序进度 -->
                        <div class="item_box" v-for="(item, index) in allGxList" :key="index">
                            <div class="item_select">
                                <div style="width:66px;min-width:66px;padding-right: 10px;text-align: right;">{{(index +
                                    1)}}.</div>
                                <div style="width: 12.06vw;">
                                    <el-select @change="processChange(item)" class="public_input"
                                        v-model="item.processId" placeholder="请选择工序">
                                        <el-option v-for="item in subjectGxList" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div style="width: 22.52vw;margin-left: 10px;">
                                    <el-select class="public_input" v-model="item.subProcessId" placeholder="请选择子工序">
                                        <el-option v-for="item in item.subProcessList" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div style="margin-left: 10px;">
                                    <el-button @click="removeImg(allGxList, index, 1)" class="border_but"
                                        type="primary">删除</el-button>
                                </div>
                            </div>
                            <div class="item_cont">
                                <div style="width:66px;min-width:66px;padding-right: 10px;line-height: 32px;">关联主体</div>
                                <div class="item_tab">
                                    <div class="tab_box" v-if="item.procFloorList.length > 0">
                                        <el-tabs type="card" v-model="item.tabName">
                                            <el-tab-pane :name="'x' + index2" :label="item + '号'"
                                                v-for="(item2, index2) in item.procFloorList" :key="index2">
                                                <div slot="label" class="tab_title">
                                                    <el-checkbox v-model="item2.checked"></el-checkbox>
                                                    <div style="margin-left: 10px;">{{item2.name}}</div>
                                                </div>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                    <!-- processId === "1" 基础 "2" 垫层  默认是1楼-->
                                    <div class="tab_cont" style="padding:20px;" v-show="'x' + index2 == item.tabName"
                                        v-for="(item2, index2) in item.procFloorList" :key="index2">
                                        <div class="form_box" style="width: 100%;">
                                            <div class="form_name must_input"
                                                style="width: auto;white-space: nowrap;min-width: 0;">计划施工楼层</div>
                                            <div class="form_cont"
                                                v-if="parseInt(item.processId) != 1 && parseInt(item.processId) != 2">
                                                <el-select multiple class="public_input" v-model="item2.floorArr"
                                                    placeholder="请选择楼层">
                                                    <el-option v-for="item in item2.floorList" :key="item"
                                                        :label="item + '楼'" :value="item">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                            <div class="form_cont"
                                                v-if="parseInt(item.processId) == 1 || parseInt(item.processId) == 2">
                                                <el-select multiple class="public_input" v-model="item2.floorArr"
                                                    placeholder="请选择楼层" disabled>
                                                    <el-option label="1楼" value="1">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="width: 100%;margin-top: 2.06vh;">
                <div class="cell_title">
                    <div class="cell_name">材料明细:</div>
                    <div class="cell_but">
                        <el-button @click="chioceCl" class="border_but" type="primary">新增</el-button>
                    </div>
                </div>
                <div class="cell_cont">
                    <div class="table_box border_table_box">
                        <el-table :data="clmxList" max-height="400px" ref="clmxTableRef" border style="width: 100%">
                            <el-table-column prop="materialName" align="center" show-overflow-tooltip label="名称">
                            </el-table-column>

                            <el-table-column prop="specificationName" align="center" show-overflow-tooltip label="规格">
                            </el-table-column>

                            <el-table-column prop="name" align="center" show-overflow-tooltip label="需用量" width="152">
                                <template slot-scope="scope">
                                    <div class="table_nums">
                                        <el-input-number v-model="scope.row.dosage" type="number" :min="1" label="描述文字">
                                        </el-input-number>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="unit" align="center" show-overflow-tooltip label="单位" width="70">
                            </el-table-column>

                            <el-table-column prop="date" align="center" show-overflow-tooltip label="使用部位" width="294">
                                <template slot-scope="scope">
                                    <div class="table_input">
                                        <el-input placeholder="请输入内容" v-model="scope.row.useFor" clearable></el-input>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="address" align="center" show-overflow-tooltip label="操作" width="70">
                                <template slot-scope="scope">
                                    <el-button @click="removeImg(clmxList, scope.$index, 1)" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button @click="cancels" class="cancelClass">取消</el-button>
            <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
        </div>
        <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
            <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
        </ul>
    </div>
    <script src="../js/FileSaver.js"></script>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    input: '',
                    value: [],
                    gcNodeList: [],
                    subjectGxList: [],
                    showApp: false,
                    projectId: '',
                    previewList: [],
                    fileList: [],
                    clmxList: [],
                    basicInof: {
                        title: '',
                        times: [],
                        workNodeId: ''
                    },
                    allGxList: [],
                    allZtList: []
                };
            },
            methods: {
                chioceCl() {
                    var that = this
                    var selectArr = []
                    for (var i = 0; i < this.clmxList.length; i++) {
                        selectArr.push({
                            materialId: this.clmxList[i].materialId,
                            specificationId: this.clmxList[i].specificationId
                        })
                    }
                    parent.$('#publicValue').val('')
                    parent.layer.open({
                        type: 2,
                        title: '选择材料和规格',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['52.08%', '64.81%'],
                        // area: ['91.91%', '72.16%'],
                        content: '../publicList/clmxList.html?projectId=' + that.projectId + '&selectArr=' + encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if (parent.$('#publicValue').val()) {
                                    var newList = JSON.parse(parent.$('#publicValue').val())
                                    var newArr = []
                                    for (var i = 0; i < newList.length; i++) {
                                        newArr.push({
                                            materialName: newList[i].materialName,
                                            materialId: newList[i].materialId,
                                            specificationId: newList[i].specificationId,
                                            specificationName: newList[i].specificationName,
                                            unit: newList[i].unit,
                                            dosage: 0,
                                            useFor: ''
                                        })
                                    }
                                    that.clmxList = that.clmxList.concat(newArr)
                                    that.$refs.clmxTableRef.doLayout()
                                }
                            }, 10)
                        }
                    });
                },
                processChange(item) {
                    item.subProcessId = ''
                    for (var i = 0; i < item.procFloorList.length; i++) {
                        item.procFloorList[i].floorArr = []
                    }
                    this.getchildGxData(item)
                    this.$forceUpdate()
                },
                addAllgx() {
                    var list = JSON.parse(JSON.stringify(this.allZtList))
                    var newarr = []
                    for (var i = 0; i < list.length; i++) {
                        var floorList = []
                        if (parseInt(list[i].downfloor) > 0) {
                            for (var j = parseInt(list[i].downfloor); j > 0; j--) {
                                floorList.push('-' + j)
                            }
                        }
                        if (parseInt(list[i].topfloor) > 0) {
                            for (var j = 1; j < parseInt(list[i].topfloor) + 1; j++) {
                                floorList.push(j + '')
                            }
                        }
                        newarr.push({
                            mainId: list[i].id,
                            name: list[i].name,
                            floorArr: [],
                            checked: false,
                            floorList: floorList
                        })
                    }
                    this.allGxList.push({
                        processId: '',
                        subProcessId: '',
                        tabName: 'x0',
                        procFloorList: newarr,
                        subProcessList: []
                    })
                },
                cancels() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    // 刷新页面
                    window.parent.location.reload();
                    parent.layer.close(index);
                },
                // 施工阶段计划 提交
                confirms() {
                    var that = this
                    if (this.basicInof.title.length == 0) {
                        this.$message({
                            message: '请输入计划标题',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.basicInof.times.length == 0) {
                        this.$message({
                            message: '请选择预计开工完工时间',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (!this.basicInof.workNodeId) {
                        this.$message({
                            message: '请选择所在工程节点',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.allGxList.length == 0) {
                        this.$message({
                            message: '请添加计划工序进度及主体楼层',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    // 对计划工序进度及主体楼层进行处理 
                    var planProcList = []
                    for (var i = 0; i < this.allGxList.length; i++) {
                        var procFloorList = []
                        // 对每一个procFloorList 计划的关联主体 进行处理 mainId关联主体的id 以及选中的楼层
                        for (var j = 0; j < this.allGxList[i].procFloorList.length; j++) {
                            if (this.allGxList[i].procFloorList[j].checked) {
                                procFloorList.push({
                                    mainId: this.allGxList[i].procFloorList[j].mainId,
                                    floor: this.allGxList[i].procFloorList[j].floorArr.join(',')
                                })
                            }
                        }
                        planProcList.push({
                            processId: this.allGxList[i].processId,
                            subProcessId: this.allGxList[i].subProcessId,
                            procFloorList: procFloorList,
                        })
                    }
                    for (var i = 0; i < planProcList.length; i++) {
                        if (!planProcList[i].processId) {
                            this.$message({
                                message: '请选择工序',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (!planProcList[i].subProcessId) {
                            this.$message({
                                message: '请选择子工序',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (planProcList[i].procFloorList.length == 0) {
                            this.$message({
                                message: '请选择关联主体',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        // 楼层  工序为 "1" "2" 不可选择计划施工楼层 施工计划楼层为空
                        // 一个计划 特定的工序和子工序 下 可以有多个关联主体
                        if (parseInt(planProcList[i].processId) !== 1 && parseInt(planProcList[i].processId) !== 2) {
                            for (var j = 0; j < planProcList[i].procFloorList.length; j++) {
                                if (!planProcList[i].procFloorList[j].floor) {
                                    this.$message({
                                        message: '请选择计划施工楼层',
                                        type: 'warning',
                                        duration: 1000
                                    });
                                    return false
                                }
                            }
                        }
                    }
                    if (this.clmxList.length == 0) {
                        this.$message({
                            message: '请添加材料明细',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var uploadFile = []
                    for (var i = 0; i < this.fileList.length; i++) {
                        uploadFile.push(this.fileList[i].fileid + ',' + this.fileList[i].filename + ',' + this.fileList[i].userName + ',' + this.fileList[i].uploadTime)
                    }
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/AddConstructionPlan',
                        data: JSON.stringify({
                            title: that.basicInof.title,
                            startTime: that.basicInof.times[0],
                            endTime: that.basicInof.times[1],
                            projectId: that.projectId,
                            uploadFile: uploadFile.join('|'),
                            workNodeId: that.basicInof.workNodeId,
                            planMatList: that.clmxList,
                            planProcList: planProcList
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                // 刷新父页面
                                window.parent.location.reload();
                                parent.layer.close(index);
                            }, 500)
                        }
                    });
                },
                httprequest(file) {
                    var that = this
                    xLoading(true, '正在上传')
                    var formData = new FormData();
                    formData.append('files', file.file);
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                                return false;
                            }
                            var newobj = {
                                fileid: res.data.fileId,
                                filename: res.data.fileName,
                                fileurl: res.data.ossUrl,
                                uploadTime: res.data.uploadTime,
                                userName: res.data.userName
                            }
                            that.fileList.push(newobj)
                        }
                    });
                },
                prevewImg(filename, urls) {
                    if (getFileType(filename) == 'IMG') {
                        this.previewList = [urls];
                        setTimeout(function () {
                            var viewer = new Viewer(document.getElementById('jq22'), {
                                hide: function () {
                                    viewer.destroy();
                                }
                            });
                            viewer.show();
                        }, 10);
                        return false
                    }
                    if (getFileType(filename) == 'PDF') {
                        parent.layer.open({
                            type: 2,
                            title: 'pdf预览',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['98%', '98%'],
                            content: '../pdf/web/viewer.html?file=' + encodeURIComponent(urls),
                            end: function () { }
                        });
                        return false
                    }
                    publicdownFile(filename, urls)
                },
                downImg(filename, urls) {
                    publicdownFile(filename, urls)
                },
                removeImg(arr, index, types) {
                    var title = '此操作将永久删除该文件, 是否继续?'
                    if (types == 1) {
                        title = '此操作将永久删除该数据, 是否继续?'
                    }
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        arr.splice(index, 1)
                    }).catch(function () {
                    });
                },
                getGcNode() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/Common/GetWorkNode',
                        data: {},
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.gcNodeList = res.data
                        }
                    });
                },
                getsubjectGxData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/Common/GetProcessList',
                        data: {},
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.subjectGxList = res.data
                            // id "1" 垫层 2 "基础"
                        }
                    });
                },
                getchildGxData(item) {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/Common/GetSubProcessList',
                        data: JSON.stringify({
                            id: item.processId
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            item.subProcessList = res.data
                            that.$forceUpdate()
                        }
                    });
                },
                getGcztData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/Common/GetProjectMainList',
                        data: JSON.stringify({
                            projectId: that.projectId
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.getsubjectGxData()
                            that.allZtList = res.data
                        }
                    });
                }
            },
            mounted() {
                this.showApp = true;
                this.projectId = getQuerys('projectId')

                this.getGcNode()
                this.getGcztData()
                // getQuerys()
            }
        });
    </script>
</body>
<style>
    .content_box {
        padding: 0 2.08vw 2.06vh;
        overflow: auto;
        height: calc(100% - 70px);
    }

    .cell_box {
        float: left;
    }

    .cell_title {
        display: flex;
        align-items: center;
        padding: 10px 0;
        height: 52px;
    }

    .cell_but {
        padding-left: 10px;
    }

    .cell_cont {
        border: 1px solid #EBEBEB;
        padding: 3.09vh 2.08vw;
    }

    .public_input .el-date-editor {
        width: 100%;
    }

    .public_input .el-date-editor .el-range__icon {
        line-height: 24px;
    }

    .public_input .el-range-separator {
        width: auto;
        line-height: 24px;
    }

    .public_input .el-date-editor .el-range__close-icon {
        line-height: 24px;
    }

    .form_box {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .form_name {
        min-width: 132px;
        padding-right: 10px;
        text-align: right;
    }

    .form_cont {
        flex: 1;
    }

    .item_cont {
        display: flex;
        margin-top: 20px;
    }

    .item_tab {
        width: calc(100% - 66px);
    }

    .tab_box {
        height: 32px;
    }

    .tab_box .el-tabs__header {
        margin: 0;
    }

    .tab_box .el-tabs__item {
        height: 32px;
        line-height: 32px;
    }

    .tab_cont {
        min-height: 94px;
        border: 1px solid #EBEBEB;
    }

    .item_select {
        display: flex;
        align-items: center;
    }

    .item_box {
        width: calc((100% - 30px) / 2);
        margin-bottom: 20px;
    }

    .list_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .tab_box .el-tabs__nav-next,
    .tab_box .el-tabs__nav-prev {
        line-height: 32px;
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        border-top: 1px solid #E4E7ED;
    }

    .tab_box .el-tabs__nav-next {
        border-right: 1px solid #E4E7ED;
    }

    .tab_box .el-tabs__nav-prev {
        border-left: 1px solid #E4E7ED;
    }

    .tab_box .el-tabs__nav-next::after {
        content: '';
        display: block;
        position: absolute;
        left: -1px;
        top: 0;
        width: 1px;
        height: 100%;
        background: #E4E7ED;
    }

    .tab_box .el-tabs--card>.el-tabs__header .el-tabs__nav {
        border-radius: 0;
    }

    .tab_box .el-tabs__nav-scroll {
        position: relative;
    }

    .tab_box .el-tabs__nav-scroll::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background: #E4E7ED;
    }

    .tab_box .el-tabs__item.is-active {
        position: relative;
    }

    .tab_box .el-tabs__item.is-active::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        background: #5574D7;
    }

    .tab_title {
        display: flex;
        align-items: center;
    }

    .table_nums .el-input-number {
        width: 100%;
        height: 24px;
        line-height: 24px;
    }

    .table_nums .el-input-number__decrease,
    .table_nums .el-input-number__increase {
        height: 22px;
        width: 24px;
        background: #fff;
    }

    .table_nums .el-input__inner {
        height: 24px;
        text-align: center;
        line-height: 24px;
        padding: 0 24px;
    }
</style>

</html>